<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>图片设置</template>
    <el-form-item label="图片标题文本" prop="pTitleText"  v-if="submitted">
      <el-input v-model="internalForm.pTitleText" clearable/>
    </el-form-item>
    <el-form-item label="图片主题" prop="pTheme">
      <el-radio-group v-model="internalForm.pTheme">
        <el-radio value="bw">默认</el-radio>
        <el-radio value="light">线条</el-radio>
        <el-radio value="test">简约</el-radio>
        <el-radio value="classic">经典</el-radio>
        <el-radio value="void">空白</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="图片标题大小" prop="pTitleSize">
      <el-input-number v-model="internalForm.pTitleSize" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="图片标题颜色" prop="pTitleColor">
      <el-color-picker v-model="internalForm.pTitleColor" />
    </el-form-item>
    <el-form-item label="图片宽度" prop="pWidth">
      <el-input-number v-model="internalForm.pWidth" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="图片高度" prop="pHeight">
      <el-input-number v-model="internalForm.pHeight" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="图片分辨率" prop="pDpi">
      <el-input-number v-model="internalForm.pDpi" :max="1000" :min="100" :step="10" />
    </el-form-item>
  </el-card>

</template>

<script setup lang="ts">

import {computed} from "vue";

const props = defineProps<{
  modelValue: {
    pTitleText: string
    pTitleSize: number
    pTitleColor: string
    pTheme: string
    pWidth: number
    pHeight: number
    pDpi: number
  }
  submitted: boolean
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', payload: {
    pTitleText: string
    pTitleSize: number
    pTitleColor: string
    pTheme: string
    pWidth: number
    pHeight: number
    pDpi: number
  }): void
}>()

const internalForm = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', { ...val })
  }
})
</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
